<template>
    <div>
        <virtual-scroll :data="list" key-prop="id" @change="(renderData) => virtualList = renderData">
            <el-table v-loading="loading" row-key="id" :data="virtualList" border :height="tableHeight"
                @selection-change="handleSelectionChange" ref="reftable">
                <!-- <el-table-column type="selection" width="50" align="center" fixed="left" /> -->
                <!-- <el-table-column label="序号" align="center" type="index" fixed="left" /> -->
                <virtual-column type="selection" width="50" fixed="left"></virtual-column>
                <virtual-column type="index" fixed="left" label="序号"></virtual-column>
                <el-table-column label="显示名称" width="150" align="center" prop="userName" fixed="left">
                    <template slot-scope="scope">

                        <el-input placeholder="" v-model="scope.row.fieldCaption"
                            @change="chanageFieldCaptionTap('fieldCaption', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="字段名称" width="150" align="center" key="fieldName" prop="fieldName"
                    :show-overflow-tooltip="true" />

                <el-table-column label="字段类型" width="100" align="center" :show-overflow-tooltip="true"
                    v-if="isType !== 0">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择" v-model="scope.row.fieldType"
                            @change="chanageFieldCaptionTap('fieldType', scope.row)"
                            :disabled="isUse == '1' ? true : false">
                            <el-option v-for="dict in fieldTypeOption" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="字段类型" width="100" align="center" v-else>
                    <template slot-scope="scope">
                        <div v-for="dict in fieldTypeOption" :key="dict.value">
                            <p v-if="dict.value == scope.row.fieldType">{{ dict.label }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="字段展示类型" align="center" :show-overflow-tooltip="true" width="150">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择" v-model="scope.row.showType"
                            :disabled="isUse == '1' ? true : false"
                            @change="chanageFieldCaptionTap('showType', scope.row)">
                            <el-option v-for="dict in showTypeOption" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column label="特殊字符" align="center" :show-overflow-tooltip="true" width="150">
                    <template slot-scope="scope">
                        <el-input placeholder="" v-model="scope.row.specialCharacter"
                            @change="chanageFieldCaptionTap('specialCharacter', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-input>
                    </template>
                </el-table-column>


                <el-table-column label="展示分类" width="150" align="center">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择" v-model="scope.row.zsfl"
                            @change="chanageFieldCaptionTap(scope.row.zsfl, scope.row)"
                            :disabled="isUse == '1' ? true : false">
                            <el-option v-for="item in classification" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="系统字段" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isSystem == 0 ? false : true" v-model="scope.row.isSystem"
                            true-label="1" false-label="0" @change="chanageFieldCaptionTap('isSystem', scope.row)"
                            disabled></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="可录入" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isInput == 0 ? false : true" v-model="scope.row.isInput"
                            true-label="1" false-label="0" @change="chanageFieldCaptionTap('isInput', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="可修改" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isUpdate == 0 ? false : true" v-model="scope.row.isUpdate"
                            true-label="1" false-label="0" @change="chanageFieldCaptionTap('isUpdate', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="查询字段" width="150" align="center">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择" v-model="scope.row.isQuery"
                            @change="chanageFieldCaptionTap('isQuery', scope.row)"
                            :disabled="isUse == '1' ? true : false">
                            <el-option v-for="item in isQueryList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="档号字段" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isArchiveNo == 0 ? false : true"
                            v-model="scope.row.isArchiveNo" true-label="1" false-label="0"
                            @change="chanageFieldCaptionTap('isArchiveNo', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="非空" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isNoEmpty == 0 ? false : true" v-model="scope.row.isNoEmpty"
                            true-label="1" false-label="0" @change="chanageFieldCaptionTap('isNoEmpty', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="隐藏" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isHidden == 0 ? false : true" v-model="scope.row.isHidden"
                            true-label="1" false-label="0" @change="chanageFieldCaptionTap('isHidden', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="可导入重复校验列" align="center" width="200" v-if="isType == 0">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.checkChongfu == 0 ? false : true"
                            v-model="scope.row.checkChongfu" true-label="1" false-label="0"
                            @change="chanageFieldCaptionTap('checkChongfu', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="可导入" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isImport == 0 ? false : true" v-model="scope.row.isImport"
                            true-label="1" false-label="0" @change="chanageFieldCaptionTap('isImport', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="可导出" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isExport == 0 ? false : true" v-model="scope.row.isExport"
                            true-label="1" false-label="0" @change="chanageFieldCaptionTap('isExport', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="元数据" align="center">
                    <template slot-scope="scope">
                        <el-checkbox style="margin-right:10px" :checked="scope.row.isMetadata == 0 ? false : true"
                            v-model="scope.row.isMetadata" true-label="1" false-label="0"
                            @change="chanageFieldCaptionTap('isMetadata', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-checkbox>
                        <span :style="scope.row.isMetadata == 0 ? 'cursor: not-allowed;' : 'cursor:pointer'"
                            @click="scope.row.isMetadata == 0 ? '' : onMetadataTap(scope.row)">{{ isUse == '1' ? '' :
                                '编辑'
                            }}</span>
                    </template>
                </el-table-column>
                <!-- v-if="isType!==0" -->
                <el-table-column label="默认值" align="center" width="120">
                    <template slot-scope="scope">
                        <el-input placeholder="" v-model="scope.row.defaultValue"
                            @change="chanageFieldCaptionTap('defaultValue', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-input>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="默认值" align="center" width="120" prop="defaultValue" v-else>
            </el-table-column> -->
                <!-- v-if="isType!==0" -->
                <el-table-column label="字段长度" align="center" width="120">
                    <template slot-scope="scope">
                        <el-input-number controls-position="right" :min="0" style="width:100%"
                            v-model="scope.row.dataLength" :max="scope.row.fieldType == '1' ? 9 : Infinity"
                            @change="chanageFieldCaptionTap('dataLength', scope.row)"
                            :disabled="isUse == '1' ? true : false" />
                    </template>
                </el-table-column>
                <el-table-column label="排序" align="center" width="120">
                    <template slot-scope="scope">
                        <el-input-number controls-position="right" :min="0" style="width:100%"
                            v-model="scope.row.orderNo" @change="chanageFieldCaptionTap('orderNo', scope.row)"
                            :disabled="isUse == '1' ? true : false" />
                    </template>
                </el-table-column>

                <!-- <el-table-column label="字段长度" align="center" width="120" prop="dataLength" v-else></el-table-column> -->
                <el-table-column label="导出列别名" align="center" width="200">
                    <template slot-scope="scope">
                        <el-input placeholder="" v-model="scope.row.exportColumnName"
                            @change="chanageFieldCaptionTap('exportColumnName', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-input>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="导出列别名" align="center" width="200" prop="exportColumnName">
            </el-table-column> -->
                <el-table-column label="导出排序号" align="center" width="120">
                    <template slot-scope="scope">
                        <el-input-number controls-position="right" :min="0" style="width:100%"
                            v-model="scope.row.exportOrderNo"
                            @change="chanageFieldCaptionTap('exportOrderNo', scope.row)"
                            :disabled="isUse == '1' ? true : false" />
                    </template>
                </el-table-column>

                <el-table-column label="表单宽度" align="center" width="120">
                    <template slot-scope="scope">
                        <el-input-number controls-position="right" :min="0" style="width:100%"
                            v-model="scope.row.colWidth" @change="chanageFieldCaptionTap('colWidth', scope.row)"
                            :disabled="isUse == '1' ? true : false" />
                    </template>
                </el-table-column>


                <el-table-column label="表头宽度" align="center" width="120">
                    <template slot-scope="scope">
                        <el-input-number controls-position="right" :min="0" style="width:100%"
                            v-model="scope.row.thWidth" @change="chanageFieldCaptionTap('thWidth', scope.row)"
                            :disabled="isUse == '1' ? true : false" />
                    </template>
                </el-table-column>


                <el-table-column label="对齐方式" align="center" width="120">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择" v-model="scope.row.thAlign"
                            @change="chanageFieldCaptionTap('thAlign', scope.row)"
                            :disabled="isUse == '1' ? true : false">
                            <el-option v-for="item in thAlignList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <!-- v-if="isType!==0" -->
                <el-table-column label="备注" align="center" width="150">
                    <template slot-scope="scope">
                        <el-input placeholder="" v-model="scope.row.remark" class="inputNumber"
                            @change="chanageFieldCaptionTap('remark', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="归档对应字段" align="center" width="150">
                    <template slot-scope="scope">
                        <el-input placeholder="" v-model="scope.row.releFieldName" class="inputNumber" size="mini"
                            @change="chanageFieldCaptionTap('releFieldName', scope.row)"
                            :disabled="isUse == '1' ? true : false"></el-input>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="备注" align="center" width="150" prop="remark" v-else></el-table-column> -->
            </el-table>
        </virtual-scroll>
        <!-- 元数据（编辑）对话框 -->
        <el-dialog :title="MetadataTitle" :visible.sync="metadataOpen" width="45%" append-to-body>
            <el-form ref="metaDataform" :model="metaDataform" label-width="130px">
                <el-row>
                    <el-col :span="12"><el-form-item label="显示名称：">
                            <el-input v-model="metaDataform.fieldCaption"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="编号：">
                            <el-input v-model="metaDataform.bianHao"></el-input>
                        </el-form-item></el-col>
                </el-row>

                <el-row>
                    <el-col :span="12"><el-form-item label="英文名称：">
                            <el-input v-model="metaDataform.englishName"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="定义：">
                            <el-input v-model="metaDataform.definition"></el-input>
                        </el-form-item></el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="目的：">
                            <el-input v-model="metaDataform.purpose"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="约束性：">
                            <el-select v-model="metaDataform.constraints" placeholder="请选择" class="el-select-mdata">
                                <el-option label="条件选" :value="0"></el-option>
                                <el-option label="必选" :value="1"></el-option>
                                <el-option label="可选" :value="2"></el-option>
                            </el-select>
                        </el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><el-form-item label="可重复性：">
                            <el-switch v-model="metaDataform.repeatString" :active-value="1" :inactive-value="0"
                                size="medium "></el-switch>
                        </el-form-item></el-col>
                    <el-col :span="12">
                        <el-form-item label="元素类型：">
                            <el-select v-model="metaDataform.elementType" placeholder="请选择" class="el-select-mdata">
                                <el-option label="简单型" :value='0'></el-option>
                                <el-option label="容器型" :value='1'></el-option>
                                <el-option label="复合型" :value='2'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12"> <el-form-item label="数据类型：">
                            <el-select v-model="metaDataform.dataType" placeholder="请选择" class="el-select-mdata">
                                <el-option v-for="dict in fieldTypeOption" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item></el-col>
                    <el-col :span="12">
                        <el-form-item label="编码修饰体系：">
                            <el-input v-model="metaDataform.code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"> <el-form-item label="值域：">
                            <el-input v-model="metaDataform.range"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="12">
                        <el-form-item label="缺省值：">
                            <el-input v-model="metaDataform.defaultValueStr"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row>
                    <el-col :span="12">
                        <el-form-item label="信息来源：">
                            <el-input v-model="metaDataform.sources"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="注释：">
                            <el-input v-model="metaDataform.notes"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="信元数据子元素：">
                            <el-select class="el-select-mdata" v-model="metaDataform.zibianhao" multiple filterable
                                allow-create default-first-option placeholder="请选择">
                                <el-option v-for="item in allDataList" :key="item.bianHao" :label="item.fieldCaption"
                                    :value="item.bianHao">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="元数据相关元素：">
                            <el-select class="el-select-mdata" v-model="metaDataform.relateBianhao" multiple filterable
                                allow-create default-first-option placeholder="请选择">
                                <el-option v-for="item in allDataList" :key="item.bianHao" :label="item.fieldCaption"
                                    :value="item.bianHao">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="app-container">
                    <el-col :span="24">
                        <el-row v-if="fieldlevel == 1 || fieldlevel == 3">
                            <!-- 添加关联 -->
                            <el-col :span="24">
                                <el-button type="primary" @click="addTap">添加</el-button>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top:20px" v-if="fieldlevel == 1 || fieldlevel == 3">
                            <el-col :span="24">
                                <el-table :data="tableData" style="width: 100%" height="200px">
                                    <el-table-column prop="fieldName" label="当前字段" width="180">
                                    </el-table-column>
                                    <el-table-column prop="fieldLevel" label="当前层级" width="180">
                                        <template slot-scope="scope">
                                            <span v-for="(i, idx) in deptOptionsRowTypeLable" :key="idx">
                                                {{ scope.row.fieldLevel == i.value ? i.label : '' }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="relefieldLevel" label="目标层级">
                                        <template slot-scope="scope">
                                            <span v-for="(i, idx) in deptOptionsRowTypeLable" :key="idx">
                                                {{ scope.row.relefieldLevel == i.value ? i.label : '' }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="releField" label="关联字段" width="180">
                                    </el-table-column>
                                    <el-table-column prop="relation" label="关联关系" width="180">
                                        <template slot-scope="scope">
                                            <span v-for="(i, idx) in relationOption" :key="idx">
                                                {{ scope.row.relation == i.value ? i.label : '' }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="address" label="操作" width="100px" fixed="right">
                                        <template slot-scope="scope">
                                            <el-button @click.native.prevent="deleteRow(scope.row)" type="text">
                                                删除
                                            </el-button>
                                            <el-button @click.native.prevent="deitRow(scope.row)" type="text">
                                                修改
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24" class="fiex">
                        <el-button type="primary" @click="onClickTap">确 定</el-button>
                        <el-button @click="onCloseTap">取 消</el-button>
                    </el-col>
                </el-row>

            </el-form>


        </el-dialog>



        <!-- 添加关联关系 -->
        <el-dialog title="添加关联关系" :visible.sync="GxGxopen" width="30%" append-to-body :before-close="onCloseTapGXGX">
            <el-form :model="gxgxForm" :rules="rulesGXGX" ref="gxgxForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="当前层级" prop="nowlevel">
                    <el-select v-model="gxgxForm.nowlevel" disabled placeholder="请选择目标层级" style="width:100%">
                        <el-option v-for="item in deptOptionsRowTypeLable" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前字段" prop="field">
                    <el-input v-model="gxgxForm.field" disabled></el-input>
                </el-form-item>
                <el-form-item label="目标层级" required prop="relelevel">
                    <el-select v-model="gxgxForm.relelevel" placeholder="请选择目标层级" style="width:100%"
                        @change="handlechange($event)">
                        <el-option v-for="item in deptOptionsRowType" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联字段" prop="relefield">
                    <el-select filterable v-model="gxgxForm.relefield" placeholder="请选择关联字段" style="width:100%"
                        @change="handlerelefieldchange($event)" :disabled="disabled">
                        <el-option v-for="item in relefieldtypeOptionsType" :key="item.FIELD_NAME"
                            :value="item.FIELD_NAME" :label="item.FIELD_NAME"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联关系" prop="relation">
                    <el-select v-model="gxgxForm.relation" placeholder="请选择关联关系" style="width:100%"
                        @change="handlerRelationChange($event)">
                        <el-option v-for="item in dictTypeGXGX" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitGXGXForm">确定</el-button>
                    <el-button @click="onCloseTapGXGX">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { updateMdata, listAllManage, listIdAll, getrManageelevancefield } from "@/api/manage/metaData";
import {
    updateCateMdataList,
    getrelevancelist,
    getrelevancefield,
    addrelevance,
    delterele,
    getreledetail,
    editrele,
    addrelevanceTem, getreledetailTem, getrelevancefieldTem, deltereleTem, getrelevancelistTem, editreleTem
} from "@/api/archive/archivesCategory.js";
import { updateMdataarchive, listAllarchive, newListIdAll } from "@/api/archive/metaData.js"
import { getDicts_user as getDicts_user } from '@/api/manage/dict/dictManageData'
import { getDicts_archive } from '@/api/archive/dict/dictManageData'
import VirtualScroll, { VirtualColumn } from 'el-table-virtual-scroll'
export default {
    // isType  0=应用定义档案门类里面的元数据方案明细列表    1=应用定义里面的元数据方案明细列表  2=立档单位下面的模板管理的元数据方案
    props: ['list', 'tableHeight', 'loading', 'isUse', 'isType', 'fieldlevel'],
    // archive_Dicts: ['GXGX'],
    data() {
        return {
            tableData: [],
            //关联关系表单
            gxgxForm: {
                field: undefined,
                nowlevel: undefined,
                relelevel: undefined,
                relefield: undefined,
                relation: undefined
            },
            //校验
            rulesGXGX: {
                relelevel: [
                    { required: true, message: '请选择目标层级', trigger: 'change' }
                ],
                relefield: [
                    { required: true, message: '请选择关联字段', trigger: 'change' }
                ],
                relation: [
                    { required: true, message: '请选择关联关系', trigger: 'change' }
                ],
            },
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            //展示分类
            classification: [
                {
                    value: '1',
                    label: '基本数据'
                }, {
                    value: '2',
                    label: '过程数据'
                }, {
                    value: '3',
                    label: '固化信息'
                }, {
                    value: '4',
                    label: '其他数据'
                }
            ],
            //查询模式
            isQueryList: [
                {
                    value: 0,
                    label: '不参加查询'
                }, {
                    value: 1,
                    label: '精确查询'
                }, {
                    value: 2,
                    label: '模糊查询'
                }, {
                    value: 3,
                    label: '左匹配查询'
                }, {
                    value: 4,
                    label: '区间查询'
                }, {
                    value: 5,
                    label: '不参加查询'
                }, {
                    value: 6,
                    label: '单选对话框'
                }, {
                    value: 7,
                    label: '多选对话框'
                }
            ],
            //对齐方式
            thAlignList: [
                {
                    value: 'left',
                    label: '左对齐'
                }, {
                    value: 'center',
                    label: '居中'
                }, {
                    value: 'right',
                    label: '右对齐'
                }
            ],
            //元数据明细标题
            MetadataTitle: "元数据明细标题",
            options: [{
                value: 'HTML',
                label: 'HTML'
            }, {
                value: 'CSS',
                label: 'CSS'
            }, {
                value: 'JavaScript',
                label: 'JavaScript'
            }],
            // allDataList: undefined,
            //元数据明细是否弹出层
            metadataOpen: false,
            //添加关联关系弹出层
            GxGxopen: false,
            metaDataform: {

            },

            // 字段类型
            fieldTypeOption: [], // 立档单位
            // 字段展示类型
            showTypeOption: [],
            allDataList: [],
            deptOptionsRowType: [],
            relefieldtypeOptionsType: [],
            dictTypeGXGX: [],
            idGxGX: undefined,//修改关联关系
            deptOptionsRowTypeLable: [ //关联列表页面显示
                { value: '3', label: '项目层' },
                { value: '1', label: '卷层' },
                { value: '0', label: '件层' },
            ],
            relationOption: [],
            disabled: false,
            virtualList: []
        }
    },
    components: {
        VirtualScroll,
        VirtualColumn
    },
    mounted() {
        // 自己随便设置个id， el-table res="historyTable"
        this.$refs.reftable.bodyWrapper.id = 'historyshop'
        this.scrollFunction(this.domObj, 'historyshop')
    },
    watch: {
        list: function (newVal, oldVal) {
            for (var i in newVal) {
                newVal[i].fieldType = newVal[i].fieldType.toString();
                newVal[i].showType = newVal[i].showType.toString();
                newVal[i].isSystem = newVal[i].isSystem.toString();
                newVal[i].isInput = newVal[i].isInput.toString();
                newVal[i].isUpdate = newVal[i].isUpdate.toString();
                newVal[i].isArchiveNo = newVal[i].isArchiveNo.toString();
                newVal[i].isNoEmpty = newVal[i].isNoEmpty.toString();
                newVal[i].isHidden = newVal[i].isHidden.toString();
                newVal[i].isExport = newVal[i].isExport.toString();

                newVal[i].isImport = newVal[i].isImport.toString();

                newVal[i].isMetadata = newVal[i].isMetadata.toString();
                newVal[i].checkChongfu = newVal[i].checkChongfu.toString();
            }
        }
    },
    created() {

        if (this.isType == '2') {
            this.getUserOption()
        } else {
            this.getArchiveOption()
        }
    },
    methods: {
        getUserOption() {
            getDicts_user('BASIC_DATA_FIELDTYPE').then(response => {
                this.fieldTypeOption = response.data.map(item => {
                    return {
                        value: item.dictValue,
                        label: item.dictLabel
                    }
                })
            })
            getDicts_user('BASIC_DATA_SHOWTYPE').then(response => {
                this.showTypeOption = response.data.map(item => {
                    return {
                        value: item.dictValue,
                        label: item.dictLabel
                    }
                })
            })
            getDicts_user('GXGX').then(response => {
                this.relationOption = response.data.map(item => {
                    return {
                        value: item.dictValue,
                        label: item.dictLabel
                    }
                })
            })
        },
        getArchiveOption() {
            getDicts_archive('BASIC_DATA_FIELDTYPE').then(response => {
                this.fieldTypeOption = response.data.map(item => {
                    return {
                        value: item.dictValue,
                        label: item.dictLabel
                    }
                })
            })
            getDicts_archive('BASIC_DATA_SHOWTYPE').then(response => {
                this.showTypeOption = response.data.map(item => {
                    return {
                        value: item.dictValue,
                        label: item.dictLabel
                    }
                })
            })
            getDicts_archive('GXGX').then(response => {
                this.relationOption = response.data.map(item => {
                    return {
                        value: item.dictValue,
                        label: item.dictLabel
                    }
                })
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
            this.$emit("handleSelectionChange", this.ids, selection)
        },


        //修改显示名称

        chanageFieldCaptionTap(val, row) {
            var data = {};
            console.log(row, "skldfjkl")
            data["ids"] = row.id;
            data["type"] = row.type;
            data['groupId'] = row.groupId;
            data['fieldName'] = row.fieldName;
            data['fieldCaption'] = row.fieldCaption;
            data['specialCharacter'] = row.specialCharacter;
            data['zsfl'] = row.zsfl;
            data['changefiled'] = val;
            var obj = Object.entries(row)
            for (var i in obj) {
                if (obj[i][0] == val) {

                    data[obj[i][0]] = obj[i][1]
                }
            }
            if (this.isType == 0) {
                updateCateMdataList(data).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.$emit("chanageFieldCaptionTap")
                });
            } else if (this.isType == 1) {
                updateMdataarchive(data).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.$emit("chanageFieldCaptionTap")
                });
            } else {
                updateMdata(data).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.$emit("chanageFieldCaptionTap")
                });
            }

            // this.$emit("chanageFieldCaptionTap")
        },

        //不分页查询元数据明细列表
        getlistAllManage(data) {
            var that = this;
            this.allDataList = [];
            listAllManage(data).then(res => {
                // console.log(that.metaDataform.fieldName,res,this.allDataList)
                if (res.data.length > 0) {
                    var list = res.data.filter(function (res) {
                        return res.fieldName != that.metaDataform.fieldName
                    })
                    for (var i in list) {
                        // console.log(list[i].bianHao,"-------------------------------------6")
                        if (list[i].bianHao != null && list[i].bianHao.length > 0) {
                            this.allDataList.push(list[i])
                        }
                    }
                }
            })
        },
        //不分页查询元数据明细列表
        getListAllarchive(data) {
            var that = this;
            this.allDataList = [];
            listAllarchive(data).then(res => {
                if (res.data.length > 0) {
                    var list = res.data.filter(function (res) {
                        return res.fieldName != that.metaDataform.fieldName
                    })
                    for (var i in list) {
                        if (list[i].bianHao != null && list[i].bianHao.length > 0) {
                            this.allDataList.push(list[i])
                        }
                    }
                }
            })

        },
        // 表单重置
        reset1() {
            this.metaDataform = {
                fieldCaption: null,
                bianHao: null,
                englishName: null,
                definition: null,
                purpose: null,
                constraints: null,
                repeatString: null,
                elementType: null,
                dataType: null,
                code: null,
                range: null,
                defaultValueStr: null,
                sources: null,
                notes: null,
                zibianhao: null,
                relateBianhao: null
            }
            this.allDataList = [];
            this.$refs["metaDataform"].resetFields();
        },
        //元数据编辑
        onMetadataTap(row) {
            var that = this;
            // console.log(this.isType, "skldfjkl")

            this.$nextTick(() => {
                if (this.isType == 0) {
                    newListIdAll(row.id).then(res => {
                        that.metaDataform = res.data;
                        console.log(that.metaDataform, "111111111111111")
                        this.getrelevancelistPOST();
                        var zibianhao = "";
                        var relateBianhao = "";
                        if (res.data != undefined && res.data.zibianhao != null && res.data.zibianhao != '') {
                            zibianhao = res.data.zibianhao.split(",");
                        } else {
                            zibianhao = undefined;
                        }

                        if (res.data != undefined && res.data.relateBianhao != null && res.data.relateBianhao != '') {
                            relateBianhao = res.data.relateBianhao.split(",");
                        }
                        else {
                            relateBianhao = undefined;
                        }


                        this.metaDataform.zibianhao = zibianhao;
                        this.metaDataform.relateBianhao = relateBianhao;
                        console.log(this.metaDataform.dataType)
                        if (this.metaDataform.dataType != null) {
                            this.metaDataform.dataType = this.metaDataform.dataType.toString();
                        }

                        this.metaDataform.ids = res.data.id;
                        this.metadataOpen = true;
                    })
                } else if (this.isType == 1) {
                    newListIdAll(row.id).then(res => {
                        that.metaDataform = res.data;
                        console.log(that.metaDataform, "222222")
                        this.getrelevancelistPOST();
                        var zibianhao = "";
                        var relateBianhao = "";
                        if (res.data != undefined && res.data.zibianhao != null && res.data.zibianhao != '') {
                            zibianhao = res.data.zibianhao.split(",");
                        } else {
                            zibianhao = undefined;
                        }

                        if (res.data != undefined && res.data.relateBianhao != null && res.data.relateBianhao != '') {
                            relateBianhao = res.data.relateBianhao.split(",");
                        }
                        else {
                            relateBianhao = undefined;
                        }
                        this.metaDataform.zibianhao = zibianhao;
                        this.metaDataform.relateBianhao = relateBianhao;
                        if (this.metaDataform.dataType != null) {
                            this.metaDataform.dataType = this.metaDataform.dataType.toString();
                        }
                        this.metaDataform.ids = res.data.id;
                        this.metadataOpen = true;
                    })
                } else {

                    listIdAll(row.id).then(res => {
                        that.metaDataform = res.data;
                        this.getrelevancelistPOST();
                        var zibianhao = "";
                        var relateBianhao = "";
                        if (res.data != undefined && res.data.zibianhao != null && res.data.zibianhao != '') {
                            zibianhao = res.data.zibianhao.split(",");
                        } else {
                            zibianhao = undefined;
                        }

                        if (res.data != undefined && res.data.relateBianhao != null && res.data.relateBianhao != '') {
                            relateBianhao = res.data.relateBianhao.split(",");

                        }
                        else {
                            relateBianhao = undefined;
                        }

                        this.metaDataform.zibianhao = zibianhao;
                        this.metaDataform.relateBianhao = relateBianhao;
                        if (this.metaDataform.dataType != null) {
                            this.metaDataform.dataType = this.metaDataform.dataType.toString();
                        };

                        this.metaDataform.ids = res.data.id;
                        this.metadataOpen = true;
                    })
                }

            })



            if (this.isType == 0 || this.isType == 1) {
                this.getListAllarchive({ type: row.type, groupId: row.groupId, isMetadata: row.isMetadata });
            } else {
                this.getlistAllManage({ type: row.type, groupId: row.groupId, isMetadata: row.isMetadata });
            }

        },

        //获取当前字段的关联列表
        getrelevancelistPOST() {
            if (this.isType == 2) {
                getrelevancelistTem({
                    field: this.metaDataform.fieldName,
                    fieldlevel: parseInt(this.fieldlevel),
                    fieldtype: this.metaDataform.fieldType,
                    groupId: this.metaDataform.groupId,
                }).then(res => {
                    this.tableData = res.rows
                })
            } else {
                getrelevancelist({
                    field: this.metaDataform.fieldName,
                    fieldlevel: parseInt(this.fieldlevel),
                    fieldtype: this.metaDataform.fieldType,
                    groupId: this.metaDataform.groupId,
                }).then(res => {
                    this.tableData = res.rows
                })
            }
        },
        deptOptionsSelect(type) {
            if (type == 0) {
                this.deptOptionsRowType = [
                    { value: '0', label: '件层' },
                ]

            } else if (type == 1) {
                this.deptOptionsRowType = [
                    { value: '1', label: '卷层' },
                    { value: '0', label: '件层' },
                ]
            } else {
                this.deptOptionsRowType = [
                    { value: '3', label: '项目层' },
                    { value: '1', label: '卷层' },
                    { value: '0', label: '件层' },
                ]
            }


        },


        //目标层级下拉事件
        handlechange(val) {
            console.log(val, "++++")
            this.disabled = false
            this.rulesGXGX.relefield = { required: true, message: '请选择关联字段', trigger: 'change' }
            this.gxgxForm.relefield = undefined;
            this.gxgxForm.relation = undefined;
            if (this.isType == 2) {
                getrManageelevancefield({
                    field: this.metaDataform.fieldName,
                    nowlevel: parseInt(this.fieldlevel),
                    relelevel: val,
                    fieldtype: this.metaDataform.fieldType,
                    groupId: this.metaDataform.groupId
                }).then(res => {
                    this.relefieldtypeOptionsType = res.data
                    this.dictTypeGXGX = [];
                })
            } else {
                getrelevancefield({
                    field: this.metaDataform.fieldName,
                    nowlevel: parseInt(this.fieldlevel),
                    relelevel: val,
                    fieldtype: this.metaDataform.fieldType,
                    groupId: this.metaDataform.groupId
                }).then(res => {
                    this.relefieldtypeOptionsType = res.data
                    this.dictTypeGXGX = [];
                })
            }

        },

        //关联字段下拉事件
        //1：整型 2：字符型 3：日期 4：浮点 5：文本 6：图像 7:长整型
        handlerelefieldchange(val) {
            console.log(val, "++")
            var data = this.relefieldtypeOptionsType.filter(item => {
                return item.FIELD_NAME == val
            })
            this.gxgxForm.relefieldtype = data[0].FIELDTYPE;
            var dictTypeGXGX = [];
            for (var i in this.relationOption) {
                this.relationOption[i].label = this.escape2Html(this.relationOption[i].label)

                if (data[0].FIELDTYPE == 5) {
                    if (this.relationOption[i].label == "=") {
                        dictTypeGXGX.push({
                            value: this.relationOption[i].value,
                            label: this.relationOption[i].label,
                        })
                    }
                } else {

                    dictTypeGXGX.push({
                        value: this.relationOption[i].value,
                        label: this.relationOption[i].label,
                    })

                }



            }

            this.dictTypeGXGX = dictTypeGXGX;


        },
        //关联关系下拉
        handlerRelationChange(val) {
            if (val == '5') {
                this.gxgxForm.relefield = undefined
                this.rulesGXGX.relefield = { required: false, message: '请选择关联字段', trigger: 'change' }
                this.disabled = true
            } else {
                this.disabled = false
            }
        },
        //添加关联按钮
        addTap() {
            this.GxGxopen = true
            this.idGxGX = undefined;
            this.disabled = false
            this.deptOptionsSelect(parseInt(this.fieldlevel))
            this.gxgxForm.field = this.metaDataform.fieldName;
            this.gxgxForm.fieldtype = this.metaDataform.fieldType;
            this.gxgxForm.groupId = this.metaDataform.groupId;
            var level = this.deptOptionsRowTypeLable.filter(res => { return res.value == parseInt(this.fieldlevel) })
            this.gxgxForm.nowlevel = level[0].value

        },
        //修改关联按钮
        deitRow(row) {
            this.idGxGX = row.id
            this.GxGxopen = true
            if (this.isType == 2) {
                getreledetailTem(row.id).then(res => {
                    // console.log(res, res.data.releField, "+++")
                    if (res.data.relation == '5') {
                        this.rulesGXGX.relefield = { required: false, message: '请选择关联字段', trigger: 'change' }
                        this.disabled = true
                    } else {
                        this.disabled = false
                    }
                    this.gxgxForm.field = res.data.fieldName;
                    this.gxgxForm.fieldtype = res.data.fieldType; //当前字段的类型必需
                    this.gxgxForm.groupId = res.data.groupId; //方案id必需
                    this.gxgxForm.id = row.id;
                    this.deptOptionsSelect(parseInt(this.fieldlevel)) //获取当前字段的层级下拉
                    this.gxgxForm.nowlevel = res.data.fieldLevel.toString(); //当前字段的层级必需
                    this.gxgxForm.relelevel = res.data.relefieldLevel.toString(); //目标层级
                    this.gxgxForm.relefield = res.data.releField;  //关联字段
                    getrelevancefieldTem({
                        field: this.metaDataform.fieldName,
                        nowlevel: parseInt(this.fieldlevel),
                        relelevel: this.gxgxForm.relelevel,
                        fieldtype: this.metaDataform.fieldType,
                        groupId: this.metaDataform.groupId
                    }).then(res => {
                        this.relefieldtypeOptionsType = res.data
                        var data = this.relefieldtypeOptionsType.filter(item => {
                            return item.FIELD_NAME == this.gxgxForm.relefield;  //关联字段
                        })
                        console.log(data, "关联字段")
                        var dictTypeGXGX = [];
                        for (var i in this.relationOption) {
                            this.relationOption[i].label = this.escape2Html(this.relationOption[i].label)
                            if (data.length > 0 && data[0].FIELDTYPE == 5) {
                                if (this.relationOption[i].label == "=") {
                                    dictTypeGXGX.push({
                                        value: this.relationOption[i].value,
                                        label: this.relationOption[i].label,
                                    })
                                }
                            } else {
                                dictTypeGXGX.push({
                                    value: this.relationOption[i].value,
                                    label: this.relationOption[i].label,
                                })
                            }
                            this.dictTypeGXGX = dictTypeGXGX;
                        }
                    })
                    console.log(res.data.relation, "_____________")
                    this.gxgxForm.relation = res.data.relation.toString();
                })
            } else {
                getreledetail(row.id).then(res => {
                    // console.log(res, res.data.releField, "+++")
                    if (res.data.relation == '5') {
                        this.rulesGXGX.relefield = { required: false, message: '请选择关联字段', trigger: 'change' }
                        this.disabled = true
                    } else {
                        this.disabled = false
                    }
                    this.gxgxForm.field = res.data.fieldName;
                    this.gxgxForm.fieldtype = res.data.fieldType; //当前字段的类型必需
                    this.gxgxForm.groupId = res.data.groupId; //方案id必需
                    this.gxgxForm.id = row.id;
                    this.deptOptionsSelect(parseInt(this.fieldlevel)) //获取当前字段的层级下拉
                    this.gxgxForm.nowlevel = res.data.fieldLevel.toString(); //当前字段的层级必需
                    this.gxgxForm.relelevel = res.data.relefieldLevel.toString(); //目标层级
                    this.gxgxForm.relefield = res.data.releField;  //关联字段
                    getrelevancefield({
                        field: this.metaDataform.fieldName,
                        nowlevel: parseInt(this.fieldlevel),
                        relelevel: this.gxgxForm.relelevel,
                        fieldtype: this.metaDataform.fieldType,
                        groupId: this.metaDataform.groupId
                    }).then(res => {
                        this.relefieldtypeOptionsType = res.data
                        var data = this.relefieldtypeOptionsType.filter(item => {
                            return item.FIELD_NAME == this.gxgxForm.relefield;  //关联字段
                        })
                        console.log(data, "关联字段")
                        var dictTypeGXGX = [];
                        for (var i in this.relationOption) {
                            this.relationOption[i].label = this.escape2Html(this.relationOption[i].label)
                            if (data.length > 0 && data[0].FIELDTYPE == 5) {
                                if (this.relationOption[i].label == "=") {
                                    dictTypeGXGX.push({
                                        value: this.relationOption[i].value,
                                        label: this.relationOption[i].label,
                                    })
                                }
                            } else {
                                dictTypeGXGX.push({
                                    value: this.relationOption[i].value,
                                    label: this.relationOption[i].label,
                                })
                            }
                            this.dictTypeGXGX = dictTypeGXGX;
                        }
                    })
                    console.log(res.data.relation, "_____________")
                    this.gxgxForm.relation = res.data.relation.toString();
                })
            }
        },
        //关联关系提交确定
        submitGXGXForm() {


            if (this.idGxGX == undefined) {//添加
                this.$refs.gxgxForm.validate((valid) => {
                    if (valid) {
                        if (this.isType == 2) {
                            addrelevanceTem(this.gxgxForm).then(res => {
                                if (res.code == "200") {
                                    this.$modal.msgSuccess(res.msg)
                                    this.GxGxopen = false;
                                    this.getrelevancelistPOST();
                                    this.reset();
                                    this.$refs.gxgxForm.resetFields();
                                    this.relefieldtypeOptionsType = [];
                                    this.deptOptionsRowType = [];
                                    this.dictTypeGXGX = [];
                                }
                            })
                        } else {
                            addrelevance(this.gxgxForm).then(res => {
                                if (res.code == "200") {
                                    this.$modal.msgSuccess(res.msg)
                                    this.GxGxopen = false;
                                    this.getrelevancelistPOST();
                                    this.reset();
                                    this.$refs.gxgxForm.resetFields();
                                    this.relefieldtypeOptionsType = [];
                                    this.deptOptionsRowType = [];
                                    this.dictTypeGXGX = [];
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            } else {

                this.$refs.gxgxForm.validate((valid) => {
                    if (valid) {
                        if (this.isType == 2) {
                            editreleTem({
                                relation: this.gxgxForm.relation,
                                groupId: this.gxgxForm.groupId,
                                id: this.gxgxForm.id,
                                releField: this.gxgxForm.relefield,
                                relefieldLevel: this.gxgxForm.relelevel,
                                relefieldType: this.gxgxForm.fieldtype
                            }).then(res => {
                                if (res.code == "200") {
                                    this.$modal.msgSuccess(res.msg)
                                    this.GxGxopen = false;
                                    this.getrelevancelistPOST();
                                    this.reset()
                                    this.idGxGX = undefined
                                    this.relefieldtypeOptionsType = [];
                                    this.deptOptionsRowType = [];
                                    this.dictTypeGXGX = [];
                                }
                            })
                        } else {
                            editrele({
                                relation: this.gxgxForm.relation,
                                groupId: this.gxgxForm.groupId,
                                id: this.gxgxForm.id,
                                releField: this.gxgxForm.relefield,
                                relefieldLevel: this.gxgxForm.relelevel,
                                relefieldType: this.gxgxForm.fieldtype
                            }).then(res => {
                                if (res.code == "200") {
                                    this.$modal.msgSuccess(res.msg)
                                    this.GxGxopen = false;
                                    this.getrelevancelistPOST();
                                    this.reset()
                                    this.idGxGX = undefined
                                    this.relefieldtypeOptionsType = [];
                                    this.deptOptionsRowType = [];
                                    this.dictTypeGXGX = [];
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        // 表单重置
        reset() {
            this.form = {
                field: undefined,
                nowlevel: undefined,
                relelevel: undefined,
                relefield: undefined,
                relation: undefined
            };
            this.resetForm("gxgxForm");
        },
        //删除关联关系
        deleteRow(row) {
            this.$modal.confirm('是否确认删除关联关系？').then(() => {
                if (this.isType == 2) {
                    deltereleTem({
                        ids: [row.id]
                    }).then(res => {
                        this.$modal.msgSuccess("删除成功");
                        this.getrelevancelistPOST();
                        this.reset()
                        this.idGxGX = undefined
                    })
                } else {
                    delterele({
                        ids: [row.id]
                    }).then(res => {
                        this.$modal.msgSuccess("删除成功");
                        this.getrelevancelistPOST();
                        this.reset()
                        this.idGxGX = undefined

                    })
                }
            }).catch(() => { });
        },

        //提交
        onClickTap() {
            console.log(this.metaDataform, "---")
            var zibianhao = null;
            if (this.metaDataform.zibianhao != null) {
                zibianhao = this.metaDataform.zibianhao.join(",")
            } else {
                zibianhao = null
            }
            var relateBianhao = null
            if (this.metaDataform.relateBianhao != null) {
                relateBianhao = this.metaDataform.relateBianhao.join(",")
            } else {
                relateBianhao = null
            }

            this.metaDataform.zibianhao = zibianhao;
            this.metaDataform.relateBianhao = relateBianhao;
            if (this.isType == 0) {
                updateCateMdataList(this.metaDataform).then(respones => {
                    this.$modal.msgSuccess("修改成功");
                    this.metadataOpen = false;
                    // window.parent.layerTest();
                })
            } else if (this.isType == 1) {
                updateMdataarchive(this.metaDataform).then(respones => {
                    this.$modal.msgSuccess("修改成功");
                    this.metadataOpen = false;
                    // window.parent.layerTest();
                })
            } else {
                updateMdata(this.metaDataform).then(respones => {
                    this.$modal.msgSuccess("修改成功");
                    this.metadataOpen = false;
                    // window.parent.layerTest();
                })
            }
            this.allDataList = [];
        },

        //取消
        onCloseTap() {
            this.metadataOpen = false;
            this.allDataList = [];
            this.reset1();

        },
        onCloseTapGXGX() {
            this.GxGxopen = false;
            this.relefieldtypeOptionsType = [];
            this.deptOptionsRowType = [];
            this.dictTypeGXGX = [];
            this.reset();
        },

    },


}
</script>
<style lang="scss" scoped>
::v-deep .el-table--medium .el-table__cell {
    padding: 7px 0 !important;
}

::v-deep .el-select-mdata {
    width: 100%
}

.fiex {
    display: flex;
    justify-content: flex-end;
}

::v-deep .el-dialog {
    padding: 0px 30px 20px 0px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow-y: auto;
}

::v-deep .el-form-item__content {
    line-height: 26px;
}
</style>
